const { resolve, join } = require('path')
const AutopreFixer = require('autoprefixer')
// const TerserPlugin = require('terser-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

const cssLoader = [
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../',
    },
  },
  'css-loader',
  // {
  //   loader: 'postcss-loader',
  //   options: {
  //     postcssOptions: {
  //       ident: 'postcss',
  //       plugins: [AutopreFixer()],
  //     },
  //   },
  // },
]
module.exports = {
  target: 'web',
  mode: 'development', //'development' : 'production'
  entry: {
    index: './src/common/index.js',
  },
  output: {
    publicPath: '/dist/',
    path: resolve(__dirname, 'dist'),
    filename: `[name].js`,
    chunkFilename: `[name].js`,
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
    alias: { vue$: 'vue/dist/vue.esm.js', '@': resolve(__dirname, 'src') },
  },
  optimization: {
    // minimize: true,
    // splitChunks: {
    //   chunks: 'all',
    //   minChunks: 1,
    //   cacheGroups: {
    //     element: {
    //       name: `element-ui`,
    //       test: /element-ui/,
    //       priority: 0,
    //     },
    //     vendors: {
    //       test: /node_modules/,
    //       priority: -10,
    //     },
    //     default: {
    //       priority: -20,
    //       reuseExistingChunk: true,
    //     },
    //   },
    // },
    // minimizer: [
    //   new CssMinimizerPlugin({ cache: true }) /*压缩css*/,
    //   new TerserPlugin({
    //     extractComments: false,
    //   }) /*关闭多余注释*/,
    // ],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: 3,
                },
              ],
            ],
            plugins: [
              [
                'component',
                {
                  libraryName: 'element-ui',
                  styleLibraryName: 'theme-chalk',
                },
              ],
            ],
          },
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: [...cssLoader],
      },
      {
        test: /\.less$/,
        use: [
          ...cssLoader,
          'less-loader',
          {
            loader: 'style-resources-loader',
            options: {
              patterns: [
                resolve(__dirname, 'src/common/utils/overall.less'),
                resolve(__dirname, 'src/common/utils/style.less'),
              ],
              // injector: 'append', // 如果在样式文件之后导入就加此行配置
            },
          },
        ],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10 * 1024,
          name: '[contenthash:10].[ext]',
          esModule: false,
          outputPath: 'media',
        },
      },
      {
        exclude: /\.(html|js|jsx|css|less|jpg|png|gif|vue|ts|tsx)/,
        loader: 'file-loader',
        options: {
          name: '[contenthash:10].[ext]',
          outputPath: 'media',
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }), //提取css
  ],
}
